import * as React from 'react';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {ScreenID, STYLE_COLOR} from '../variables';
import HomePage from './Tabs/home/HomePage';
import TeamPage from './Tabs/team/TeamPage';
import {Image} from 'react-native';
import MinePage from './Tabs/mine/MinePage';

const Tab = createBottomTabNavigator();

const TabsConfig = [
  {
    label: '首页',
    component: HomePage,
    activeIcon: require('../assets/tabBar/ico_tab_home_active.png'),
    normalIcon: require('../assets/tabBar/ico_tab_home_inactive.png'),
    screenId: ScreenID.HomePage,
  },
  {
    label: '团队',
    component: TeamPage,
    activeIcon: require('../assets/tabBar/ico_tab_team_active.png'),
    normalIcon: require('../assets/tabBar/ico_tab_team.png'),
    screenId: ScreenID.TeamPage,
  },
  {
    label: '我的',
    component: MinePage,
    activeIcon: require('../assets/tabBar/ico_tab_mine_active.png'),
    normalIcon: require('../assets/tabBar/ico_tab_mine_inactive.png'),
    screenId: ScreenID.MinePage,
  },
];

export function TabContainer() {
  return (
    <Tab.Navigator
      screenOptions={() => {
        // console.log(route);
        return {
          headerShown: false,
          tabBarActiveTintColor: STYLE_COLOR.THEME,
          tabBarInactiveTintColor: STYLE_COLOR.TEXT_GREY,
          tabBarLabelStyle: {fontSize: 10, marginBottom: 4},
        };
      }}>
      {TabsConfig.map(
        ({screenId, label, activeIcon, normalIcon, component}, index) => (
          <Tab.Screen
            key={index}
            name={screenId}
            options={{
              title: label,
              tabBarIcon: ({focused}) => (
                <Image source={focused ? activeIcon : normalIcon} />
              ),
              tabBarStyle: {
                paddingTop: 4,
              },
            }}
            component={component}
          />
        ),
      )}
    </Tab.Navigator>
  );
}
